<template>
  <div class="box">
    <div class="container">
      <div class="search-box">
        <div class="search-top-box">
          <div class="search-top-right-box">
            <el-button type="primary" class="add" icon="el-icon-plus" @click="dialogVisible = true">添加验收标准</el-button>
          </div>
        </div>
      </div>
      <!-- table -->
      <el-table :header-cell-style="{background:'#FAFBFC',color:'#828A9D',textAlign:'center'}"
        :cell-style="{textAlign:'center',color:'#1B2431'}" :data="tableData" style="width: 100%"
        v-loading="tableLoading">
        <el-table-column prop="node_name" label="验收标准名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="node_name" label="类型" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.type == 1?'验收节点':'验收标准'}}
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="更新时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit({index:scope.$index, item:scope.row})">查看</el-button>
            <el-button style="margin-left: 10px;" slot="reference" size="mini" type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :page-sizes="[20, 50, 100]" class="el-pagination" @current-change="handleCurrentChange"
      :current-page="page" :page-size="num" @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 添加 -->
    <el-dialog :title="formInline.id?'修改验收标准':'添加验收标准'" :visible.sync="dialogVisible" width="400px"
      :before-close="handleClose">
      <el-form :model="formInline" ref="ruleForm" :rules="rules" class="demo-form-inline">
        <el-form-item label="验收标准名称" prop="name">
          <el-input type="textarea" :rows="5" v-model="formInline.name" placeholder="验收标准名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFunc('ruleForm')">
          {{formInline.id?'修 改':'添 加'}}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import brandApi from '@/api/brandApi'
  import nodesApi from '@/api/nodesApi'
  import _tools from '@/utils/_tools'
  export default {
    name: '',
    data() {
      return {
        tableLoading: false,
        rules: {
          name: [{
            required: true,
            message: '请输入标准名称',
            trigger: 'change'
          }, ],
        },
        currIndex: 0,
        dialogVisible: false,
        page: 1,
        tableData: [],
        showOpne: false,
        total: 0,
        num: 20,
        formSearch: {
          keyword: ''
        },
        formInline: {
          name: '',
        }
      }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
      this.getNodesList();
    },
    methods: {
      // 单页数据量修改
      handleSizeChange(e) {
        this.num = e;
        this.page = 1;
        this.getNodesList();
      },
      // 搜索
      onSearch(page) {
        this.page = page || 1;
        this.getNodesList();
      },
      handleCurrentChange(page) {
        this.page = page;
        this.getNodesList();
      },
      // 关闭添加弹窗
      handleClose() {
        this.formInline = {
          name: ''
        }
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
          this.dialogVisible = false;
        })
      },
      // 
      submitFunc(formName) {
        let formInline = this.formInline;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (formInline.id) {
              this.updNodes({
                node_name: formInline.name,
                node_id: formInline.id,
                type: 2
              })
              return;
            }
            this.addNodes({
              node_name: formInline.name,
              type: 2
            });
          }
        });
      },
      // 添加
      addNodes(obj) {
        nodesApi.addNodes(obj).then(res => {
          console.log(res, "添加")
          if (res.code == 200) {
            this.$message.success('添加成功');
            this.handleClose();
            this.onSearch();
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      // 修改
      handleEdit(data) {
        let formInline = this.formInline;
        this.currIndex = data.idnex;
        formInline.name = data.item.node_name;
        formInline.id = data.item.id;
        this.dialogVisible = true;
      },
      updNodes(data) {
        nodesApi.updNodes(data).then(res => {
          console.log(res, "修改")
          if (res.code == 200) {
            this.$message.success('修改成功');
            this.handleClose();
            this.onSearch(this.page);
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      // 删除
      handleDelete(data) {
        this.$confirm('此操作将删除该标准, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          nodesApi.delNodes({
            node_id: data.id
          }).then(res => {
            console.log(res, "删除")
            if (res.code == 200) {
              this.$message.success('删除成功');
              if (this.tableData.length == 1) {
                this.page = this.page > 1 ? this.page - 1 : this.page;
              }
              this.onSearch(this.page);
            } else {
              this.$message.warning(res.message);
            }
          }).catch(err => {
            this.$message.warning(err.message);
          })
        }).catch(() => {

        });
      },
      // 获取标准列表
      getNodesList() {
        this.tableLoading = true;
        nodesApi.getNodesList({
          page: this.page,
          num: this.num,
          type: 2
        }).then(res => {
          console.log(res, "标准列表")
          this.tableLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.max;
          }
        }).catch(err => {
          this.tableLoading = false;
        })
      },
    }
  }

</script>

<style lang="scss" scoped>
  @import './index.scss';

</style>
